<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link th:replace="fragments/dependency :: edit-css">

<title>优铺Admin</title>
</head>

<body style="background: #fff; margin-top: 7px;">
	<div class="right_col" style="background: #F7F7F7">
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="x_panel">
					<div class="x_title">
						<h2>更新文章</h2>

						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<br>
						<form id="demo-form2" class="form-horizontal form-label-left"
							novalidate="">
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									编号 ：<span class="required" th:text="${entity.id}"></span>
								</label> <input type="hidden" name="id" th:value="${entity.id}" />
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									封面预览 <span class="required"></span>
								</label>
								<div id="upload-file-preview" class="col-md-6 col-sm-6 col-xs-12">
									<img th:src="${@environment.getProperty('static.domain') + entity.coverUrl}" style="width:110px;height:110px;">
								</div>
							</div>
							
							<div class="form-group" th:if="${param.readonly[0]} != 'y'">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									展示封面 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
									<div id="upload-picker">选择文件</div>
									<input type="hidden" name="coverUrl" th:value="${entity.coverUrl}">
									
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									列表标题 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
									<input type="text" name="showTitle" th:value="${entity.showTitle}" required="required"
										class="form-control col-md-7 col-xs-12">
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									文章标题 <span class="required">*</span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
									<input type="text" th:value="${entity.title}" name="title"
										required="required" class="form-control col-md-7 col-xs-12">
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									所属分类 <span class="required">*</span>
								</label>
								<div class="col-md-2 col-sm-3 col-xs-12">
									<select class="form-control" id="parentId" name="parentId">
										<option value="" selected>请选择</option>
										<option th:each="item:${oneCategory}" th:value="${item.id}"
											th:text="${item.name}" th:selected="${entity.oneArticleCategory?.id == item.id}"></option>
									</select>
								</div>
								<div  class="col-md-2 col-sm-3 col-xs-12">
									<select class="form-control" id="catId" name="catId">
										<option th:value="${entity.articleCategory?.id}" th:text="${entity.articleCategory?.name}"></option>
									</select>
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									文章内容 <span class="required">*</span>
								</label>
								
							</div>
							<div class="form-group">
								<div class="col-md-4 col-sm-6 col-xs-12">
									<script id="content" type="text/plain" style="width: 777px; height: 500px;">[(${entity.content})]</script>
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									作者／来源 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
									<input type="text" name="source" th:value="${entity.source}" required="required"
										class="form-control col-md-7 col-xs-12">
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12"> 是否开启留言: <span class="required">*</span>
								</label>
								<p>
									<input type="radio" name="message" id="message0" th:checked="${entity.message == null or !entity.message}" value="false" required checked data-parsley-multiple="message" style="position: absolute; opacity: 0;"> 否 
									<input type="radio" name="message" id="message1" value="true" th:checked="${entity.message}" data-parsley-multiple="message" style="position: absolute; opacity: 0;"> 是
								</p>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12"> 是否开启报名: <span class="required">*</span>
								</label>
								<p>
									<input type="radio" name="enroll" id="enroll0" value="false" th:checked="${entity.enroll == null or !entity.enroll}" required checked data-parsley-multiple="enroll" style="position: absolute; opacity: 0;"> 否 
									<input type="radio" name="enroll" id="enroll1" value="true" th:checked="${entity.enroll}" data-parsley-multiple="enroll" style="position: absolute; opacity: 0;"> 是
								</p>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12"> 是否发布文章: <span class="required">*</span>
								</label>
								<p>
									<input type="radio" name="publish" id="publish0" value="false" th:checked="${entity.publish == null or !entity.publish}" required checked data-parsley-multiple="publish" style="position: absolute; opacity: 0;"> 否 
									<input type="radio" name="publish" id="publish1" value="true" th:checked="${entity.publish}" data-parsley-multiple="publish" style="position: absolute; opacity: 0;"> 是
								</p>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									活动标题 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
									<input type="text" name="activityTitle" required="required" th:value="${entity.activityTitle}" class="form-control col-md-7 col-xs-12" >
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									活动地点 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
									<input type="text" name="activityAddress" required="required" th:value="${entity.activityAddress}" class="form-control col-md-7 col-xs-12">
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									活动类型 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
									<input type="text" name="activityType" th:value="${entity.activityType}" required="required" class="form-control col-md-7 col-xs-12">
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									活动时间 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12" id='myDatepicker0'>
									<input type="text" name="activityTime" th:value="${entity.activityTime}" required="required" class="form-control col-md-7 col-xs-12">
									<span class="input-group-addon"> 
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
								</div>
							</div>
							
							
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									活动负责人 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
									<input type="text" name="activityUsername" th:value="${entity.activityUsername}" required="required" class="form-control col-md-7 col-xs-12">
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									标识符 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
								<select class="form-control" id="label" name="label" >
										<option value="" >请选择</option>
										<option  th:each="label:${label}" th:value="${label}" th:text="${label}" th:selected="${entity.label == label}">Option one</option>
									</select>
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12">
									虚拟点击量 <span class="required"></span>
								</label>
								<div class="col-md-6 col-sm-6 col-xs-12">
									<input type="text" name="dummyClickNumber" th:value="${entity.dummyClickNumber}" required="required"
										class="form-control col-md-7 col-xs-12">
								</div>
							</div>

							<div class="ln_solid"></div>
							<div class="form-group">
								<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
									<button class="btn btn-primary" type="reset">重置</button>
									<button type="button" id="save" class="btn btn-success">提交</button>
								</div>
							</div>

						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="fragments/dependency :: edit-js"></div>
	<script src="/dic/project-type.js"></script>
	<script src="/dic/area.js"></script>
	<script type="text/javascript" charset="utf-8" src="/vendors/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="/vendors/ueditor/ueditor.all.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="/vendors/ueditor/lang/zh-cn/zh-cn.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=47vEMrUPXkGWul3APowwKZ1w"></script>
	<script type="text/javascript" th:inline="javascript">
	$(function() {
		var enrolls = $("input[name=enroll]:checked").val();
		if(enrolls == 'false'){
			$("input[name=activityTitle]").attr("disabled", true);
			$("input[name=activityTitle]").val("");
			$("input[name=activityAddress]").attr("disabled", true);
			$("input[name=activityAddress]").val("");
			$("input[name=activityType]").attr("disabled", true);
			$("input[name=activityType]").val("");
			$("input[name=activityTime]").attr("disabled", true);
			$("input[name=activityTime]").val("");
			$("input[name=activityUsername]").attr("disabled", true);
			$("input[name=activityUsername]").val("");
		}
		var uploader = upUpload
				.createWithPreview(
						"https://static.ucaiworld.com/ueditor/jsp/controller.jsp?action=uploadimage&watermark=true",
						"upload-picker", "upload", 'upload-file-preview', 110, 110, adminLayer

				);
		uploader.startUpload = function() {
			
		}
		uploader.uploadAccept = function(obj, ret) {
			$("input[name=coverUrl]").val(ret.url).trigger("validate");
		}
	})
	var toolbars = [ 'anchor', //锚点
	'undo', //撤销
	'redo', //重做
	'bold', //加粗
	//'indent', //首行缩进
	'snapscreen', //截图
	'italic', //斜体
	'underline', //下划线
	'strikethrough', //删除线
	//'subscript', //下标
	//'fontborder', //字符边框
	//'superscript', //上标
	'formatmatch', //格式刷
	'source', //源代码
	//'blockquote', //引用
	'pasteplain', //纯文本粘贴模式
	//'selectall', //全选
	//'print', //打印
	'preview', //预览
	//'horizontal', //分隔线
	'removeformat', //清除格式
	//'time', //时间
	//'date', //日期
	'unlink', //取消链接
	//'insertrow', //前插入行
	//'insertcol', //前插入列
	//'mergeright', //右合并单元格
	//'mergedown', //下合并单元格
	//'deleterow', //删除行
	//'deletecol', //删除列
	//'splittorows', //拆分成行
	//'splittocols', //拆分成列
	//'splittocells', //完全拆分单元格
	//'deletecaption', //删除表格标题
	//'inserttitle', //插入标题
	//'mergecells', //合并多个单元格
	//'deletetable', //删除表格
	//'cleardoc', //清空文档
	//'insertparagraphbeforetable', //"表格前插入行"
	//'insertcode', //代码语言
	//'fontfamily', //字体
	'fontsize', //字号
	//'paragraph', //段落格式
	//'simpleupload', //单图上传
	'insertimage', //多图上传
	//'edittable', //表格属性
	//'edittd', //单元格属性
	'link', //超链接
	'emotion', //表情
	'spechars', //特殊字符
	//'searchreplace', //查询替换
	//'map', //Baidu地图
	//'gmap', //Google地图
	//'insertvideo', //视频
	//'help', //帮助
	'justifyleft', //居左对齐
	'justifyright', //居右对齐
	'justifycenter', //居中对齐
	'justifyjustify', //两端对齐
	'forecolor', //字体颜色
	'backcolor', //背景色
	//'insertorderedlist', //有序列表
	//'insertunorderedlist', //无序列表
	'fullscreen' //全屏
	//'directionalityltr', //从左向右输入
	//'directionalityrtl', //从右向左输入
	//'rowspacingtop', //段前距
	//'rowspacingbottom', //段后距
	//'pagebreak', //分页
	//'insertframe', //插入Iframe
	//'imagenone', //默认
	//'imageleft', //左浮动
	//'imageright', //右浮动
	//'attachment' //附件
	//'imagecenter', //居中
	//'wordimage', //图片转存
	//'lineheight', //行间距
	//'edittip ', //编辑提示
	//'customstyle', //自定义标题
	//'autotypeset', //自动排版
	////'webapp', //百度应用
	//'touppercase', //字母大写
	//'tolowercase', //字母小写
	//'background', //背景
	//'template', //模板
	//'scrawl', //涂鸦
	////'music', //音乐
	//'inserttable', //插入表格
	//'drafts', // 从草稿箱加载
	//'charts', // 图表
	]
		var ue = UE.getEditor('content', {
			toolbars : [ toolbars ]
		});
		var update = {
			init : function() {
				update.initValidate();
				$("#save").on('click', function() {
					$('form').submit();
				});
				$('input[type="radio"]').iCheck({
					radioClass : 'iradio_flat-green'
				});
				
				$('#enroll0').on('ifChecked', function(event) {
					$("input[name=activityTitle]").attr("disabled", true);
					$("input[name=activityTitle]").val("");
					$("input[name=activityAddress]").attr("disabled", true);
					$("input[name=activityAddress]").val("");
					$("input[name=activityType]").attr("disabled", true);
					$("input[name=activityType]").val("");
					$("input[name=activityTime]").attr("disabled", true);
					$("input[name=activityTime]").val("");
					$("input[name=activityUsername]").attr("disabled", true);
					$("input[name=activityUsername]").val("");
				});
				$('#enroll1').on('ifChecked', function(event) {
					$("input[name=activityTitle]").attr("disabled", false);
					$("input[name=activityAddress]").attr("disabled", false);
					$("input[name=activityType]").attr("disabled", false);
					$("input[name=activityTime]").attr("disabled", false);
					$("input[name=activityUsername]").attr("disabled", false);
					
				});
				$("#parentId").on("change", function() {
					var parentId = $("#parentId").val();
					if (parentId == "") {
						$("#catId").empty();
						$("#catId").html('<option value="">请选择</option>');
					} else {
						httpClientForUpAdmin.get("/article/getCategory?parentId=" + parentId, null, function(data) {
							if(data==""){
								var parentName = $("#parentId").find("option:selected").text();
								$("#catId").html("<option value="+parentId+" selected>"+parentName+"</option>");
								return false;
							}
							var html='<option value="" selected>请选择</option>';
							$.each(data,function(i,v){  
								html+="<option value="+v.id+">"+v.name+"</value>"  
                        		})  
                        		$("#catId").empty();
							$("#catId").html(html);
						});
					}
				});
			},
			initValidate : function() {
				formValidator.rules = {

				};

				formValidator.fields = {
						title : 'required;',
						content : 'required;',
						catId : 'required;',
						activityTitle : 'required(#enroll1:checked);',
						activityAddress : 'required(#enroll1:checked);',
						activityType : 'required(#enroll1:checked);',
						activityTime : 'required(#enroll1:checked);',
						activityUsername : 'required(#enroll1:checked);',
						sort : 'integer;',
				};
				//表单提交的实体获取函数
				formValidator.getEntity = function() {
					var enroll = $("input[name=enroll]:checked").val();
					var parent = {};
					if(enroll=="true"){
						parent.activityTitle = $("input[name=activityTitle]").val();
						parent.activityAddress = $("input[name=activityAddress]").val();
						parent.activityType = $("input[name=activityType]").val();
						parent.activityTime = $("input[name=activityTime]").val();
						parent.activityUsername = $("input[name=activityUsername]").val();
					}
					parent.coverUrl= $("input[name=coverUrl]").val();
					parent.showTitle= $("input[name=showTitle]").val();
					parent.title = $("input[name=title]").val();
					parent.articleCategory = $("#catId").val();
					parent.oneArticleCategory = $("#parentId").val();
					parent.content = ue.getContent();
					parent.source = $("input[name=source]").val();
					parent.message = $("input[name=message]:checked").val();
					parent.enroll = $("input[name=enroll]:checked").val();
					parent.publish = $("input[name=publish]:checked").val();
					parent.label = $("#label").val();
					parent.dummyClickNumber = $("input[name=dummyClickNumber]").val();
					parent.sort = $("input[name=sort]").val();
					parent.status = 100;
					return parent;
				}
				//初始化验证路径以及回调函数
				formValidator.init('/article/update/?id='
						+ $('input[name=id]').val(), function(data) {
					if (data.id > 0) {
						adminLayer.alert({
							content : '更新成功',
							yes : function() {
								window.parent.location.reload();
							},
							end : function() {

							}
						});
					}
				});
			}
		}
		update.init();
		
		$('#myDatepicker0').datetimepicker({
			ignoreReadonly : true,
			allowInputToggle : true,
			format : 'YYYY/MM/DD HH:mm',
		});
	</script>

	<script th:replace="fragments/detailForm :: detailForm"></script>
</body>
</html>
